<template>
  <a-spin :spinning="confirmLoading">
    <div>
      <a-form-model ref="form" :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <div style="margin-bottom: 14px; color: orange">
          {{ $t('说明：运营参数直接关系到场地的运营，若修改需要场地负责人短信验证。') }}
        </div>
        <a-form-model-item :label="$t('负责人')" style="margin-bottom: 0">
          <span style="font-size: 16px; color: #000">{{ model.name }}</span>
        </a-form-model-item>
        <a-form-model-item :label="$t('联系电话')" style="margin-bottom: 0">
          <span style="font-size: 16px; color: #000">{{ model.phone | hidephone }}</span>
        </a-form-model-item>
        <a-form-model-item :label="$t('短信验证码')" prop="captcha" :rules="[{ required: true, message: $t('请输入短信验证码') }]">
          <div>
            <a-input
              style="width: 200px"
              v-model="model.captcha"
              ref="captcha"
              :maxLength="6"
              oninput="value=value.replace(/\D/g,'');"
            />
            <a-button
              type="primary"
              style="color: #fff; background-color: #ff6550; border-color: #ff6550"
              @click="getCaptcha"
              :disabled="isTiming"
              >{{ btnfont }}</a-button
            >
          </div>
        </a-form-model-item></a-form-model
      >
    </div>
  </a-spin>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
let timer, i

export default {
  name: 'YarnCertForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {
        name: '',
        phone: '',
      },
      confirmLoading: false,
      btnfont: this.$t('获取'),
      isTiming: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    edit() {
      let that = this
      getAction('/shop/bisShop/list', {}).then((res) => {
        if (res.success) {
          if (res.result.total > 0) {
            let dtl = res.result.records[0]
            let name = dtl.contact || ''
            let phone = dtl.phone || ''
            if (!phone || !name) {
              that.$message.warning('请联系新盈加客服填写场地负责人信息')
              that.isTiming = true
              return
            }
            if(i === undefined || i === 0){
              that.isTiming = false
            }else{
              that.isTiming = true
            }
            that.$nextTick(() => {
              that.model = Object.assign({}, { name: name, phone: phone })
            })
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    getCaptcha() {
      let that = this;
      i = 60
      that.isTiming = true
      that.$message.warning(that.$t('send-sms',{phone:that.model.phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")}))
      let request = {}
      request['phone'] = that.model.phone
      getAction('/system/sms/sendAuthCode', request).then((res) => {
        if (res.success) {
          clearInterval(timer)
          timer = setInterval(function () {
            if (i == 0) {
              clearInterval(timer)
              that.btnfont = that.$t('获取')
              that.isTiming = false
            } else {
              i--
              that.btnfont = i + 's'
            }
          }, 1000)
        } else {
          that.$message.warning(res.message)
          that.isTiming = false
        }
      })
    },
    submitForm() {
      let that = this
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let request = {}
          request['captcha'] = that.model.captcha
          request['phone'] = that.model.phone
          postAction('/system/sms/checkAuthCode', request)
            .then((res) => {
              if (res.success) {
                clearInterval(timer)
                that.$emit('ok')
                that.visible = false
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>